<template>
  <div class="content3">
    <div class="cLeft">
      <div class="avator" v-if="this.userInfo">
        <img :src="this.userInfo.img.anonymousFilePath?getUrl(this.userInfo.img.anonymousFilePath):''" alt="" width="40px" height="40px">
        <hr />
      </div>
      <div class="sidebar">
        <div
          v-for="(item, index) in sidebarList"
          :key="index"
          :class="active == index ? 'sidebarItem activeItem' : 'sidebarItem'"
          @click="onChange(index, item)"
        >
          <span>{{ item.name }}</span>
          <div :class="active == index ? 'dot' : ''"></div>
        </div>
      </div>
    </div>
    <div class="cRight">
      <div>
        <van-search
          v-model="searchVal"
          show-action
          :clearable="false"
          placeholder="关键字搜索"
          @search="onSearch"
        >
          <template #action>
            <div @click="onClickButton" class="searchBtn">
              <van-icon name="search" />
            </div>
          </template>
        </van-search>
        <div class="cellBox">
          <van-cell
            title="全部话题"
            is-link
            v-if="topicList.length > 0"
            @click="toList()"
          >
            <template #icon>
              <img src="@/assets/images/topic/allTopic.png" alt="" style="margin-right:5px"/>
            </template>
          </van-cell>
          <van-cell
            is-link
            :icon="topicItem.icon"
            v-for="(topicItem, topicIndex) in topicList"
            :key="topicIndex"
            @click="toList(topicItem)"
          >
            <template #icon>
              <img src="@/assets/images/topic/colorfulLife.png" alt="" style="margin-right:5px"/>
            </template>
            <template #title>
              <span class="custom-title"><span>{{ topicItem.name }}</span><span v-if='topicItem.contentCount > 0'>({{ topicItem.contentCount }})</span></span>
              <van-tag
                color="#f5eaeb"
                v-if="lastTopic.id == topicItem.id"
                style="margin-left: 5px"
                >最新</van-tag
              >
            </template>
          </van-cell>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import {
  findCategoryInfo,
  findAllList,
  findCurrentAccount,
} from "@/api/colorfulLife.js";
import { openFileUrl } from '@/store/openFile'
export default {
  name: "colorfulLife",
  data() {
    return {
      active: 0,
      searchVal: "", //搜索关键字
      parentId: "UCAT585159535249256448",
      userInfo:{},//用户信息
      categoryId: "",
      sidebarList: [],
      topicList: [],
      lastTopic: {},
      itemTitle: "",
    };
  },
  computed: {
    ...mapGetters(["user"]),
  },
  created() {
    this.parentId=this.$route.query.parentId
    this.itemTitle=this.$route.query.title
    this.getCurrentAccount();
    this.getCategoryList();
  },
  methods: {
    getUrl(value) {
        console.log('图片地址是:'+openFileUrl(value))
        return openFileUrl(value)
      },
    //获取当前账户信息
    getCurrentAccount() {
      var params = {
        userName: this.user.userName,
      };
      findCurrentAccount(params).then((res) => {
        this.userInfo = res.data.data;
      });
    },
    //获取二级栏目详细数据
    getCategoryList() {
      var params = {
        userName: this.user.userName,
        parentId: this.parentId,
      };
      findCategoryInfo(params).then((res) => {
        if (res.data.data.length > 0) {
          this.sidebarList = res.data.data;
          this.categoryId = res.data.data[0].id;
          this.lastTopic = res.data.data[0].lastTopic;
          this.getTopicList(this.categoryId);
        } else {
          this.sidebarList = [];
        }
      });
    },
    //获取二级栏目下话题分类数据
    getTopicList(categoryId) {
      var params = {
        userName: this.user.userName,
        parentCategoryId: this.parentId, //一级栏目id
        categoryId: categoryId, //二级栏目id
      };
      findAllList(params).then((res) => {
        this.topicList = res.data.data;
      });
    },
    //二级栏目改变
    onChange(index, item) {
      this.active = index;
      this.categoryId = item.id;
      this.lastTopic = this.sidebarList[index].lastTopic;
      this.getTopicList(this.categoryId);
    },
    onSearch(val) {
      console.log(val);
    },
    onClickButton() {},
    // 跳转列表页
    toList(item) {
      if (item) {
        this.$router.push({
          path: "/colorfulLifeList",
          query: { topicId: item.id, categoryId: item.categoryId,title:this.itemTitle},
        });
      } else {
        this.$router.push({
          path: "/colorfulLifeList",
          query: { topicId: "", categoryId: this.categoryId ,title:this.itemTitle},
        });
      }
    },
  },
};
</script>
<style>
.content3 {
  display: flex;
  height: calc(100vh - 50px);
  
  overflow-y: auto;
}
.cLeft {
  width: 1.46rem;
  background-color: #efefef;
  padding: 12px 0px;
}
.cRight {
  width: calc(100% - 1.46rem);
}
.avator {
  text-align: center;
}
.avator img {
  border-radius: 50%;
  margin: auto;
}
.avator hr {
  width: 90%;
  margin: 8px auto 4px;
  height: 1px;
  background-color: #c5c5c5;
  border: none;
}
.cLeft .sidebar {
  overflow-y: auto;
}
.cLeft .sidebarItem {
  width: 1.26rem;
  line-height: 1rem;
  font-size: 14px;
  border: 2px solid #c5c5c5;
  margin: 10px auto;
  border-radius: 5px;
  background-color: #fff;
  text-align: center;
}
.cLeft .activeItem {
  border: 2px solid #f76e20;
  position: relative;
}
.activeItem .dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background-color: #f76e20;
  position: absolute;
  right: -3px;
  top: -3px;
}
.van-search .van-search__content {
  border-radius: 0.42rem;
  height: 0.84rem;
  line-height: 0.84rem;
  border: 1px solid #f76e20;
  background-color: #fff;
}
.searchBtn {
  width: 1.5rem;
  height: 0.84rem;
  background-color: #e99d42;
  text-align: center;
  color: #fff;
  font-size: 0.55rem;
  margin-left: -1.7rem;
  border-radius: 0.42rem;
}
.van-search__action:active {
  background-color: #fff;
}
.cellBox .van-cell {
  background-color: #f8f8f8;
  margin: 0.3rem 0.28rem;
  width: calc(100% - 0.56rem);
  border-radius: 3px;
  padding: 10px 10px;
}
.cellBox .van-tag {
  color: #9a9a9a;
  font-size:14px;
  /* padding: 0.1rem 0.15rem; */
}
.fz16 {
  font-size: 0.16rem;
}
.fz20 {
  font-size: 0.2rem;
}
</style>